<template>
    <d2-container type='full'>
        <el-card>
            <el-button type="danger" size="mini" @click='addBlogClass()'>增加分类</el-button>
        </el-card>

        <el-row :gutter="12">
            <el-col :span="6" class='d2-mt' v-for="item in classList" :key="item.id">
                <el-card shadow="hover">
                    {{item.className}}
                    <el-button style="float: right; padding: 3px 0;color: #ce5252;" type="text"
                        @click='deleteBlog(item.className)'>删除</el-button>
                </el-card>
            </el-col>
        </el-row>

    </d2-container>
</template>

<script>
import blog from '@/api/blog'
export default {
    name: 'blogClass',
    data() {
        return {
            classList: []
        }
    },
    mounted() {
        this.findBlogClass()
    },
    methods: {
        findBlogClass() {
            blog.findBlogClass().then(res => {
                this.classList = res.data
            }).catch(err => { })
        },
        addBlogClass() {
            this.$prompt('请填写分类', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消'
            }).then(async ({ value }) => {
                let res = await blog.addBlogClass({ className: `${value}` })
                if (res.success) {
                    this.$message({
                        message: '添加成功',
                        type: 'success'
                    })
                    this.findBlogClass()
                } 
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '取消输入'
                });
            });
        },
        deleteBlog(className) {
            this.$confirm('您确认删除该分类吗?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(async () => {
                let res = await blog.deleteBlogClass({ className })
                if (res.success) {
                    this.$message({
                        message: '删除成功',
                        type: 'success'
                    })
                    this.findBlogClass()
                }
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        }
    }
}
</script>
